<template>
	<view>
		<view class="title-box">
			最新资讯
		</view>
		<view class="four_banner">
			<template v-if="content" v-for="(i_,i ) of content">
				<view class="four-item">
					<view class="four-img">
						<img :src="i_.headImg" />
					</view>
					<view class="four-text" @click="to('home/consult?id='+i_.id)">
						<view class="four-top">
							{{i_.title}}
						</view>
						<view class="four-time">
							{{i_.createTime}}
						</view>
					</view>
				</view>
				<hr class="half" v-if="i<content.length-1" />
			</template>
		</view>
	</view>
</template>

<script>
	import {
		consultMore
	} from '@/api/index'

	export default {
		data() {
			return {
				content: []
			}
		},
		onLoad() {
			consultMore().then(res => {
				if (res) {
					res.forEach(i => {
						this.content.push(i)
					})
				}
			}).catch(e => {
				this.$modal.msgLoading('暂无')
			})
		}
	}
</script>
<style>
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	.title-box {
		margin: 2vw;
		font-size: 4vw;
		font-weight: bold;

	}


	.four_banner {
		margin: 0 2vw;
		background-color: #fff;
		border-radius: 2vw;


		.four-item {
			height: 18vw;
			padding: 0 2vw;
			display: flex;
			justify-content: center;
			gap: 4vw;
			align-items: center;

			.four-img {
				height: 14vw;
				width: 14vw;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.four-text {
				width: 65vw;
				height: 20vw;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.four-top {
					margin-top: 7px;
					font-size: 3.4vw;
					font-weight: bold;
				}

				.four-time {
					margin-bottom: 7px;
					font-size: 3.2vw;
					color: #a6a6a6;
				}
			}

			.half {
				border: none;
				border-top: 2px dashed black;
				margin: 20px 0;
			}
		}
	}
</style>